<!--
 * @Description: 权限 增改页面
 * @Autor: zhangzhanhua
 * @Date: 2021-11-17 09:22:47
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-11-25 16:34:36
-->
<template>
    <div class="addOrEdit">
        <div class="manage">
            <el-form label-position="right" class="elFormWeb" :model="manageData" :rules="manageDataRule" ref="manageData" v-loading='loading'>
                <el-form-item label="权限编码" prop="authorityIdList" label-width="120px" v-if="type === 'add'">
                    <el-select v-model="manageData.authorityIdList" filterable size="mini" multiple clearable style="width:100%" value-key="authorityCode" @change="authorityChange">
                        <el-option v-for="(item,index) in authorityList" :key="index" :label="item.authorityCode" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限编码" prop="authorityId" label-width="120px" v-if="type === 'edit'">
                    <el-select v-model="manageData.authorityId" filterable size="mini" clearable style="width:100%" @change="authorityIdChange">
                        <el-option v-for="(item,index) in authorityList" :key="index" :label="item.authorityCode" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限名称" label-width="120px">
                    <div class="authorityName">
                        <div class="nameList" v-for="item in authorityNameList" :key="item.id">
                            {{item.authorityName}}
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div class="userBtn">
                <el-button size="small" type="primary" @click="saveAdd" :disabled='loading'>保 存</el-button>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    components: {

    },
    props: {
        //选中项id
        rowId: {
            type: String | Number,
        },
        //第三方授权ID
        parentId: {
            type: String | Number,
        },
        //状态
        type: {
            type: String,
            default: 'add'
        },
        // 关闭页面
        close: {
            type: Function
        },
    },
    data() {
        return {
            loading: false,//编辑时防止快速点击
            manageData: {
                authorityIdList: [],//权限编码列表(新增时使用)
                authorityId: '' //权限ID (编辑时使用)
            },
            //校验规则
            manageDataRule: {
                authorityIdList: [
                    {
                        required: true,
                        message: '权限编码不能为空',
                    }
                ],
                authorityId: [
                    {
                        required: true,
                        message: '权限编码不能为空',
                    }
                ]
            },
            //权限列表
            authorityList: [],
            //权限名称组成显示列表
            authorityNameList: [],
        }
    },
    mounted() {
        //查询权限下拉框
        this.getListAuthority()
        this.getRowData(); //编辑时获取当前行数据
    },
    methods: {
        /**
         * @description: 新增时多选权限改变
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        authorityChange(val) {
            this.authorityNameList = val.map(res => {
                for (let authorityObj of this.authorityList) {
                    if (res == authorityObj.id) {
                        return authorityObj
                    }
                }
            })
        },
        /**
         * @description: 编辑时改变
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        authorityIdChange(val){
            this.authorityNameList = this.authorityList.filter(res=>res.id === val)
        },
        /**
         * @description: 查询权限下拉框
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        getListAuthority() {
            this.$http(`/${this.$ServiceName}/api/external/public/listauthority`).then(res => {
                if (res.data.success) {
                    this.authorityList = res.data.data
                }
            })
        },
        /**
         * @description:编辑时获取该行数据
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        getRowData() {
            if (this.type == 'edit') {
                this.loading = true
                this.$http(`/${this.$ServiceName}/api/external/exauthorityrelation/${this.$version}/getexauthorityrelation`, {
                    params: {
                        id: this.rowId
                    }
                }).then(res => {
                    if (res.data.success) {
                        this.loading = false
                        let data = {
                            authorityId: res.data.data.authorityId, //权限ID
                        }
                        this.manageData = data
                        //显示权限名称
                        this.authorityIdChange(res.data.data.authorityId)
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            }
        },
        /**
         * @description: 保存新增
         * @param {*}
         * @return {*}
         * @author: zhangzhanhua
         */
        saveAdd() {
            this.$refs.manageData.validate(valid => {
                if (valid) {
                    let params = {}
                    //新增
                    if (this.type == 'add') {
                        params.thirdAuthId = this.parentId //第三方授权ID
                        params.authorityIdList = this.manageData.authorityIdList //权限idList
                        this.$http.post(`/${this.$ServiceName}/api/external/exauthorityrelation/${this.$version}/insert`, params).then(res => {
                            if (res.data.success) {
                                this.$message.success(res.data.msg)
                                this.close()
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        })
                    } else { //编辑
                        params.id = this.rowId //主键ID
                        params.authorityId = this.manageData.authorityId //权限ID
                        this.$http.put(`/${this.$ServiceName}/api/external/exauthorityrelation/${this.$version}/updatebyid`, params).then(res => {
                            if (res.data.success) {
                                this.$message.success(res.data.msg)
                                this.close()
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        })
                    }
                }
            })

        }
    },
}
</script>

<style lang="less" scoped>
.addOrEdit {
    .userBtn {
        z-index: 100;
        text-align: right;
        padding-right: 20px;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
    }
}
.manage {
    /deep/ .drawer .el-input__inner {
        width: 100% !important;
    }
    .elFormWeb {
        // height: 654px;
        padding: 10px 30px 50px 10px;
        overflow: auto;
        .authorityName {
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 5px 10px;
            min-height: 25px;
            .nameList {
                height: 25px;
                line-height: 25px;
                color: rgba(0, 0, 0, 0.8);
                // font-size: 12px;
            }
        }
    }
}
</style>
